import React, {useState} from "react";
import {SET_RELEASE_INFO_FIELD} from "../../../../redux/constants/releaseDetail/tabInfo";
import {
  Button,
  FormGroup,
  Input,
  InputGroup,
  InputGroupAddon,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader
} from "reactstrap";
import * as Icon from "react-feather";
import {Trash} from "react-feather";

const AddArtists = props => {
  const {setIsAddArtists, isAddArtists, data, setFieldData} = props
  const [name, setName] = useState('');
  const [editedId, setEditedId] = useState(null);
  const [artists, setArtists] = useState(data.divider_artists || []);
  const [isValid, setIsValid] = useState(false);

  const addArtist = () => {
    if (name.trim() === '') {
      setIsValid(true)
      return;
    }

    const new_artists = artists.concat()
    new_artists.unshift(name);

    setArtists(new_artists);
    setIsValid(false);
    setName('')
  }

  const updateArtist = () => {
    if (name.trim() === '') {
      setIsValid(true)
      return;
    }

    const new_artists = artists.concat()
    new_artists[editedId] = name;

    setArtists(new_artists);
    setIsValid(false);
    setEditedId(null)
    setName('')
  }

  const Destroy = (id) => {
    if (editedId !== null) return false;

    const new_artists = artists.concat()
    new_artists.splice(id, 1)

    setArtists(new_artists);
  }

  const setEdit = (value, id) => {
    setName(value)
    setEditedId(id)
  }

  const Save = () => {
    if (editedId !== null) return false;

    setFieldData(SET_RELEASE_INFO_FIELD, 'divider_artists', artists)
    setIsAddArtists(false)
  }

  return (
    <Modal
      isOpen={isAddArtists}
      toggle={() => setIsAddArtists(false)}
      size="md"
    >
      <ModalHeader toggle={() => setIsAddArtists(false)}>Добавить артиста</ModalHeader>
      <ModalBody>
        <div>
          <FormGroup>
            <InputGroup>
              <Input
                type="text"
                value={name}
                onChange={e => setName(e.target.value)}
                id="artist-divide-name"
                name="artist-divide-name"
                invalid={isValid}
              />
              <InputGroupAddon addonType="prepend">
                {editedId === null && <Button onClick={addArtist} color="primary">Добавить</Button>}
                {editedId !== null && <Button onClick={updateArtist} color="primary">Сохранить</Button>}
              </InputGroupAddon>
            </InputGroup>
            {isValid ? <span className="invalid-tooltip d-block">Введите артиста</span> : ''}
          </FormGroup>
        </div>
        <div className="mt-3">
          {artists && artists.map((value, id) => {
            return <div key={id} className="d-flex h-100 mt-2">
              <span className="artist-divide-name flex-grow-1 flex-shrink-1 p-1">{value}</span>
              <div className="d-flex align-items-center pl-1">
                <Button.Ripple onClick={() => setEdit(value, id)} className="p-1" color="flat-primary">
                  <Icon.Edit2 size={18}/>
                </Button.Ripple>
                <Button.Ripple onClick={() => Destroy(id)} disabled={editedId !== null} className="p-1"
                               color="flat-danger">
                  <Trash size={18}/>
                </Button.Ripple>
              </div>
            </div>
          })
          }
        </div>
      </ModalBody>
      <ModalFooter>
        <Button.Ripple
          color="danger"
          type="submit"
          onClick={() => setIsAddArtists(false)}
        >
          Отменить
        </Button.Ripple>
        <Button.Ripple
          disabled={editedId !== null}
          color="primary"
          type="submit"
          onClick={Save}
        >
          Сохранить
        </Button.Ripple>
      </ModalFooter>
    </Modal>
  )
}

export default AddArtists;
